import React, { useState, useEffect } from 'react'
import { Card, Space, Table, Tag, Button, Input, Select, Pagination } from "antd"
import { Link, useNavigate } from "react-router-dom"
import { findAllGoodsApi, findByTypeApi } from "../../apis/goodsApi"


export default function ProductList() {
  const [data, setData] = useState([])
  const [searchType, setSearchType] = useState("")
  const [searchData, setSearchData] = useState("")
  const navigate = useNavigate()

  useEffect(() => {
    fetchData()
  }, [])
  /**
   * 发送请求
   */
  const fetchData = async () => {
    const res = await findAllGoodsApi()
    console.log(res);
    setData(res.data.data)
  }
  const gotoUpdatePage = (values) => {
    console.log(values);
    // Vue this.$router.push() replace()
    navigate(`/home/productupdate`, {
      state: { id: values._id }
    })
  }
  const columns = [
    {
      title: '商品名字',
      dataIndex: 'name',
      render: (text, text2) => {
        return text
      }
    },
    {
      title: '商品描述',
      dataIndex: 'title'
    },
    {
      title: '商品价格',
      dataIndex: 'price'
    },
    {
      title: '商品类型',
      dataIndex: 'type',
      render: (text) => {
        return text.name
      }
    },
    {
      title: '商品状态',
      dataIndex: 'state',
      align: "center",
      render: (text) => {
        const element = text == 0 ? <Button type="primary">上架</Button> : <Button type="dashed">下架</Button>
        return element
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <>
          <Button>删除</Button>&nbsp;&nbsp;&nbsp;
          <Button onClick={() => gotoUpdatePage(record)}>修改</Button>
          {/* <Link to="/home/main">修改</Link> */}
        </>

      ),
    },
  ];


  const handleChange = (value) => {
    setSearchType(value)
  }
  const inputChange = (event) => {
    const value = event.target.value
    setSearchData(value)

  }
  const searchProduct = async () => {
    const res = await findByTypeApi({ searchType, searchData })
    console.log(res);
    setData(res.data.data)
  }
  return (
    <React.Fragment>
      <div style={{ height: "100px", display: "flex", alignItems: "center" }}>
        <Select
          style={{
            width: 200,
          }}
          onChange={handleChange}
          options={[
            {
              value: 'name',
              label: '按照名字搜索',
            },
            {
              value: 'title',
              label: '按照描述搜索',
            }
          ]} />
        &nbsp;&nbsp;&nbsp;
        <Input onChange={inputChange} style={{ width: 200 }} placeholder="请输入都是内容" />
        &nbsp;&nbsp;&nbsp;
        <Button onClick={searchProduct} type='primary'>搜索</Button>
      </div>
      <Card
        title="商品列表"
        extra={<Link to="/home/productadd">添加商品</Link>}
        style={{
          width: "100%",
        }}
      >
        <Table
          bordered
          rowKey="_id"
          columns={columns}
          dataSource={data}
          loading={false}
          pagination={{ defaultCurrent: 1, defaultPageSize: 6, showQuickJumper: true, showSizeChanger: true, pageSizeOptions: [6, 12, 18] }}
        />
        {/* <Pagination defaultCurrent={1} total={50} /> */}
      </Card>
    </React.Fragment>
  )
}
